/**
 * Created by lenovo on 16-11-12.
 */
$(document).ready(function(){
	var canvas = document.getElementById("canvas_id");
	var ctx = canvas.getContext("2d");
	canvas.width = 512;
	canvas.height = 480;


	var defaultImage = new Image();
	defaultImage.src="images/defaultImage.png";
	ctx.drawImage(defaultImage,0,0);

// Background image
	var bgReady = false;
	var bgImage = new Image();
	bgImage.onload = function () {
		bgReady = true;
	};
	bgImage.src = "images/background.png";

// Hero image
	var heroReady = false;
	var heroImage = new Image();
	heroImage.onload = function () {
		heroReady = true;
	};
	heroImage.src = "images/hero.png";

// Monster image
	var monsterReady = false;
	var monsterImage = new Image();
	monsterImage.onload = function () {
		monsterReady = true;
	};
	monsterImage.src = "images/monster.png";

	var bombImage = new Image;
	var bombReady = false;
	bombImage.onload = function(){
		bombReady = true;
	};
	bombImage.src = 'images/zhadan.png';

// Game objects
	var hero = {
		speed: 80 // movement in pixels per second
	};
	var monster = {
		x:0,
		y:0
	};
	var bomb = {
		x:0,
		y:0
	};
	var monstersCaught = 0;

// Handle keyboard controls
	var keysDown = {};

	addEventListener("keydown", function (e) {
		keysDown[e.keyCode] = true;
	}, false);

	addEventListener("keyup", function (e) {
		delete keysDown[e.keyCode];
	}, false);

// Reset the game when the player catches a monster
	function reset(){
		hero.x = canvas.width / 2;
		hero.y = canvas.height / 2;

		// Throw the monster somewhere on the screen randomly
		produce_monster();
		produce_bomb();
	}


	function produce_monster(){
		monster.x = 32 + (Math.random() * (canvas.width - 64));
		monster.y = 32 + (Math.random() * (canvas.height - 64));
		var k=50;
		if(Math.abs(monster.x - hero.x) <k ||
			Math.abs( hero.y - monster.y) <k ||
			Math.abs(monster.x - bomb.x) <k ||
			Math.abs(monster.y -bomb.y) <k ||
			Math.abs(hero.x - bomb.x) <k ||
			Math.abs(hero.y - bomb.y) <k
		){
			produce_monster();
		}
	}

	function produce_bomb(){
var k = 50
		bomb.x = 32+(Math.random() * (canvas.width - 64));
		bomb.y = 32 + (Math.random() * (canvas.height - 64));
		if(Math.abs(monster.x - hero.x) <k ||
			Math.abs( hero.y - monster.y) <k ||
			Math.abs(monster.x - bomb.x) <k ||
			Math.abs(monster.y -bomb.y) <k || Math.abs(hero.x - bomb.x) <k || Math.abs(hero.y - bomb.y) <k){
			produce_bomb();
		}
	}


// Update game objects
	function update(modifier){
		if (38 in keysDown) { // Player holding up
			hero.y -= hero.speed * modifier;
			if(hero.y<=0) hero.y=448;
		}
		if (40 in keysDown) { // Player holding down
			hero.y += hero.speed * modifier;
			if(hero.y >= 448) hero.y = 0;
		}
		if (37 in keysDown) { // Player holding left
			hero.x -= hero.speed * modifier;
			if(hero.x <= 0) hero.x = 480 ;
		}
		if (39 in keysDown) { // Player holding right
			hero.x += hero.speed * modifier;
			if(hero.x >= 480) hero.x = 0;
		}

		// Are they touching?
		if (
			hero.x <= (monster.x + 32)
			&& monster.x <= (hero.x + 32)
			&& hero.y <= (monster.y + 32)
			&& monster.y <= (hero.y + 32)
		) {
			++monstersCaught;
			if(monstersCaught%5 == 0){
				hero.speed += 5;
			}
			produce_monster();


		}

		if(hero.x <= (bomb.x+100) && bomb.x <= (hero.x+32) && hero.y <= (bomb.y+100) && bomb.y <= (hero.y+32) ){
			alert("你被炸死了")
		}
	}

// Draw everything
	function render(){
		if (bgReady) {
			ctx.drawImage(bgImage, 0, 0);
		}

		if (heroReady) {
			ctx.drawImage(heroImage, hero.x, hero.y);
		}

		if (monsterReady) {
			ctx.drawImage(monsterImage, monster.x, monster.y);
		}

		if(bombReady){
			ctx.drawImage(bombImage,bomb.x,bomb.y);
		}

		// Score
		ctx.fillStyle = "rgb(250, 250, 250)";
		ctx.font = "24px Helvetica";
		ctx.textAlign = "left";
		ctx.textBaseline = "top";
		ctx.fillText("Goblins caught: " + monstersCaught, 32, 32);
	}

// The main game loop
	function main(){
		var now = Date.now();
		var delta = now - then;
		update(delta / 1000);
		render();
		then = now;
		// Request to do this again ASAP
		requestAnimationFrame(main);
	}
// Cross-browser support for requestAnimationFrame
	var w = window;
	requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

// Let's play this game!
	$("#start_game").click(function(){
		//$('#start').attr('disabled',"true");
		monstersCaught = 0;
		then = Date.now();
		reset();
		main();
	})
});
// Create the canvas    hero=>英雄  monster=>怪兽


/*function restart_gams(){
	$('#start').removeAttr("disabled");
	monstersCaught = 0;
	then = Date.now();
	reset();
	main();
}*/
